<template>
  <div class="vote-validate">
      <div class="select-item box">
          <div @click="selectType(index)" v-for="(item,index) in selectList" :key="index" class="tab" :class="{active: activeIndex ==index}">{{item.name}}</div>
      </div>
      <div class="search-wrap box">
          <div class="icon"></div>
          <input v-model="inputText" :placeholder="placheholderText" type="text">
          <div @click="search" class="btn">搜索</div>
      </div>
  </div>
</template>
<script>
let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js");
  export default {
    data() {
      return {
        activeIndex:0,
        inputText:'',
        selectList:[{
            name:'搜主题'
        },{
            name:'搜地址'
        }],
        placheholderText:'请输入要搜索的投票主题信息'
      }
    },
    mounted() {

    },
    methods: {
        search(){
            if(!this.inputText){
                let text = this.activeIndex == 1?'请输入区块链地址':'请输入投票主题信息'
                this.$vux.toast.show({
                    text:text,
                    type:'cancel'
                })
                return;
            }
            let link = this.activeIndex == 1?'validateResult':'voteResultList'
            this.$router.push({ path: link, query: { val:this.inputText }})
            let  url = CONSTANT.URL.VOTE.FINDVOTELIST,
                param = {
                    voteTitleLike:this.inputText
                },
                dataForm = {
                    pageIndex:1,
                    pageSize:10
                }
            common.requestAjax(url,param,dataForm,(res)=>{
                if(res.status == 200){

                }else{
                }
            })    
        },
        selectType(num){
            this.activeIndex = num;
            this.placheholderText = this.activeIndex == 1?'请输入要搜索的区块链地址':'请输入要搜索的投票主题信息'
        }
    }
  };
</script>
<style lang="scss">
    .vote-validate{
        overflow: hidden;
        .select-item{
            font-size: .28rem;
            color: #fff;
            margin: .3rem 0 0 .3rem;
            .tab{
                width: 1.2rem;
                height: .58rem;
                text-align: center;
                line-height: .58rem;
                color: #666;
                box-sizing: border-box;
                border: 1px solid #D1D1D1;
                font-size: .28rem;
                &:last-child{
                    border-left: 0;
                }
                &:first-child{
                    border-right: 0;
                }
                &.active{
                    color: #fff;
                    background-color: #198AE7;
                }
            }
        }
        .search-wrap{
            position: relative;
            width: 6.89rem;
            height: .58rem;
            margin: .2rem auto 0;
            border: 1px solid #DEDEDE;
            border-radius: .1rem;
            -webkit-border-radius: .1rem;
            .icon{
                width: .3rem;
                height: .31rem;
                background-image: url(../../images/search.png);
                background-size: 100%;
                margin: .15rem .17rem 0 .3rem;
            }
            input{
                height: .58rem;
                width: 4.3rem;
                border: 0px;
                font-size: .28rem;
                &:focus{
                    outline: 0;
                }
            }
        }
        .btn{
            position: absolute;
            font-size: .28rem;
            right: 0;
            color: #fff;
            background-color: #198AE7;
            border-top-right-radius:.1rem;
            border-bottom-right-radius:.1rem;
            width: 1rem;
            text-align: center;
            line-height: .58rem;
            height: .58rem;
        }
    }
</style>

